<template>
  <el-row>
    <el-col :span="16">
      <div class="search-container" v-loading="loading">
        <el-form v-model="searchPage" inline="true" >
          <el-form-item  v-for="(item, index) in searchPage.items" :key="index" :label="$t('msg.role.'+item.name)">
            <el-input v-if="item.itemType !== 'DATE'" v-model="item.value"></el-input>
            <el-col :span="24" v-else>
              <el-form-item>
                <el-date-picker
                  v-model="item.value"
                  type="date"
                  label="Pick a date"
                  placeholder="Pick a date"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">{{$t('msg.common.search')}}</el-button>
            <el-button @click="onReset">{{$t('msg.common.reset')}}</el-button>
            <el-button type="primary" @click="onAdd">新增</el-button>
            <el-button type="primary" @click="onModify">修改</el-button>
            <el-button type="primary" @click="onDelete">删除</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
    <el-col>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="16">
      <div class="data-container">
          <el-table :data="tableData" style="width: 100%" highlight-current-row @row-click="selectOne">
          <el-table-column type="index" width="80" :label="$t('msg.common.serial')"/>
          <el-table-column prop="createTime" :label="$t('msg.common.createTime')" width="160" />
          <el-table-column prop="code" :label="$t('msg.role.code')" width="180" />
          <el-table-column prop="name" :label="$t('msg.role.name')" width="120" />
          <el-table-column prop="roleDesc" :label="$t('msg.role.desc')" width="200" />
          <el-table-column fixed="right" :label="$t('msg.common.operation')" width="160">
            <!-- vue3中 solt-scop已经放弃使用 -->
            <template #default="scope">
              <el-button  text size="small" @click="handleClick(scope.row)">{{$t('msg.common.edit')}}</el-button>
              <el-button  text type="danger" size="small" @click="handleDelete(scope.row)">{{$t('msg.common.delete')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:currentPage="searchPage.current"
          v-model:page-size="searchPage.pageSize"
          :page-sizes="[20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableDatas.total"
          hide-on-single-page=true
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-col>
    <el-col :span="8">
      <el-table
        :data="authEntity"
        style="width: 96%"
        ref="multipleTableRef"
        row-key="id"
        lazy
        :load="load"
        :tree-props="{ children: 'authorizes', hasChildren: 'sysMenu' }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="名称" width="200" />
        <el-table-column prop="code" label="代码" width="250" />
      </el-table>
    </el-col>
  </el-row>
  <el-dialog
      v-model="dialogForm"
      :title="dialogTitle"
      width="30%"
    >
      <el-form v-model="roleEntity" ref="roleRef">
        <el-form-item label="代码" prop="code">
          <el-input v-model.trim="roleEntity.code"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model.trim="roleEntity.name"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="sortNo">
          <el-input v-model.number="roleEntity.sortNo"></el-input>
        </el-form-item>
        <el-form-item label="id" prop="id"  v-show="false" >
          <el-input v-model.number="roleEntity.id"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">{{$t('msg.common.cancel')}}</el-button>
          <el-button type="primary" @click="onSave"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
</template>

<script setup>
import { ref, onActivated } from 'vue'
import { list, deleteById } from '@/api/common/common'
import { listTable } from '@/api/user/authorize'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'

const tableDatas = ref({})
const dialogVisible = ref(false)
const dialogForm = ref(false)

const loading = ref(false)
const authEntity = ref([])
const firstFlag = ref(1)
const currentRole = ref({})
const multipleTableRef = ref([])
const i18n = useI18n()

const handleClose = () => {
  dialogVisible.value = false
}
const searchPage = ref({
  items: [
    {
      name: 'code',
      itemType: 'STRING',
      sign: '==',
      value: ''
    },
    {
      name: 'name',
      itemType: 'STRING',
      sign: 'like',
      value: ''
    }
  ],
  pageSize: 20,
  current: 1,
  sortBy: ['id']
})

const tableData = ref([])

const searchFunction = async () => {
  list(searchPage.value, 'role').then(res => {
    tableData.value = res.content
    tableDatas.value.total = parseInt(res.totalElements)
    ElMessage.success(i18n.t('msg.common.success'))
    if (firstFlag.value === 1) {
      firstFlag.value = 2
      initLoad()
    }
  }).catch(err => {
    ElMessage.success(i18n.t('msg.common.error') || err.message)
  })
}

onActivated(searchFunction())

const onSubmit = () => {
  searchFunction()
}

const initLoad = async () => {
  listTable().then(res => {
    authEntity.value = res
  })
}

const load = (row, treeNode, resolve) => {
  resolve(row.authorizes)
}

const onReset = () => {
  searchPage.value = {
    items: [
      {
        name: 'code',
        itemType: 'STRING',
        sign: '==',
        value: ''
      },
      {
        name: 'name',
        itemType: 'STRING',
        sign: 'like',
        value: ''
      }
    ],
    pageSize: 20,
    current: 1,
    sortBy: ['id']
  }
  // 处理查询
  searchFunction()
}

const handleSizeChange = pageSize => {
  searchPage.value.pageSize = pageSize
  // 执行查询操作
  searchFunction()
}

const handleCurrentChange = current => {
  searchPage.value.current = current
  // 执行查询操作
  searchFunction()
}

const handleClick = row => {
  dialogVisible.value = true
  authEntity.value = row
}

const handleDelete = row => {
  loading.value = true
  deleteById(row.id, 'role').then(res => {
    loading.value = false
    ElMessage.success(i18n.t('msg.common.success'))
    searchFunction()
  }).catch(err => {
    loading.value = false
    ElMessage.error(err.message)
  })
}

const selectOne = row => {
  currentRole.value = row
  // 获取当前角色的权限
}

const toggleSelection = rows => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value.clearSelection()
  }
}

const onAdd = () => {
  // 新增
}

const onModify = () => {
  // 修改
}

const onDelete = () => {
  // 删除
}

const onSave = () => {
  // 保存
}
</script>

<style scope>
.search-container {
  width: 100%;
  height: 100px;
}
</style>
